import styles from './index.module.scss'
import { useRouter } from 'next/router'
import Link from 'next/link'
import cm from 'classnames'
import Nav from './nav'
import { memo, useState } from 'react'

import dynamic from 'next/dynamic'

const RightMenu = dynamic(() => import('./right-menu'))

const Index = ({ className }) => {
  const router = useRouter()
  //打开按钮层
  const [openMenu, setMenu] = useState(false)

  return (
    <div className="hideWhenPc">
      <header className={cm(styles.header, className)}>
        <Link href="/" className={styles.logo}>
          {router.pathname === '/' ? (
            <h1>
              <img loading="lazy" src="/images/ico.webp" alt="星视界" className={styles.img} />
            </h1>
          ) : (
            <img loading="lazy" src="/images/ico.webp" alt="星视界" className={styles.img} />
          )}
        </Link>
        <Link href="/search-phone" className={styles.searchBox}>
          <img loading="lazy" className={styles.searchImg} src="/images/search.png" alt="搜索" />
        </Link>
        <img src="/images/h5-menu.webp" alt="更多" className={styles.moreMenu} onClick={() => setMenu(true)} />
      </header>
      <Nav />
      {openMenu && <RightMenu onClose={() => setMenu(false)} />}
    </div>
  )
}

export default memo(Index)
